<template>
	<picker mode="multiSelector" :range="citylist" :value="addressIndex" :range-key="rangeKey" @columnchange="columnchange" @change="bindRegionChange">
		<slot></slot>
	</picker>
</template>

<script>
	/**
	 *  uiwu-city-picker 省市区三级联动
	 * @property {Array} list 城市数据列表
	 * @property {String} rangeKey 中文名称显示渲染字段
	 * @event {Function()} changes 回调
	 */
	export default {
		name: 'uiwu-city-picker',
		props: {
			list: {
				default: () => [],
				type: Array
			},
			rangeKey: {
				default: 'label',
				type: String
			},
			isArea: {
				default: false,
				type: Boolean
			}
		},
		data() {
			return {
				citylist: [],
				addressIndex: []
			};
		},
		watch: {
			list(e) {
				if (this.isArea) {
					this.citylist = [0, 0, 0];
					this.addressIndex = [0, 0, 0];
				} else {
					this.citylist = [0, 0];
					this.addressIndex = [0, 0];
				}

				const [firstProvince = {
					c: []
				}] = e || [];
				const [firstCityItem = {
					c: []
				}] = firstProvince.c || [];
				const {
					c: firstArea = []
				} = firstCityItem;
				if (this.isArea) {
					this.citylist[0] = e;
					this.citylist[1] = firstProvince.c;
					this.citylist[2] = firstArea;
					this.addressIndex = [0, 0, 0];
				} else {
					this.citylist[0] = e;
					this.citylist[1] = firstProvince.c;
					this.addressIndex = [0, 0];
				}


			}
		},
		created() {
			if (this.list && this.list.length) {
				if (this.isArea) {
					this.citylist = [0, 0, 0];
					this.addressIndex = [0, 0, 0];
				} else {
					this.citylist = [0, 0];
					this.addressIndex = [0, 0];
				}

				const [firstProvince = {
					c: []
				}] = this.list || [];
				const [firstCityItem = {
					c: []
				}] = firstProvince.c || [];
				const {
					c: firstArea = []
				} = firstCityItem;

				if (this.isArea) {
					this.citylist[0] = this.list;
					this.citylist[1] = firstProvince.c;
					this.citylist[2] = firstArea;
					this.addressIndex = [0, 0, 0];
				} else {
					this.citylist[0] = this.list;
					this.citylist[1] = firstProvince.c;
					this.addressIndex = [0, 0];
				}


			}
		},
		methods: {
			columnchange({
				detail: {
					column,
					value
				}
			}) {
				this.addressIndex[column] = value;

				switch (column) {
					case 0:
						this.updateCitylist(1, this.list[value]?.c || []);
						if (this.isArea) {
							this.updateCitylist(2, this.citylist[1][0]?.c || []);
						}
						break;
					case 1:
						if (this.isArea) {
							this.updateCitylist(2, this.citylist[1][value]?.c || []);
						}
						break;
				}

				this.$forceUpdate();
			},

			updateCitylist(column, list) {
				this.addressIndex.splice(column, 1, 0);
				this.citylist[column] = list;
			},
			bindRegionChange({detail: {value}}) {
				let data = {
					province: '',
					city: '',
					area: '',
					city_name: ''
				};
				value.forEach((val, index) => {
					const { v: valValue, n: valLabel } = this.citylist[index][val];
					if (index === 0) {
						data.province = valLabel;
					}
					if (index === 1) {
						data.city = valLabel;
					}
					if (index === 2 && this.isArea) { // 判断是否需要返回 area
						data.area = valLabel;
					}
					data.city_name += `${valLabel} `;
				});
				this.$emit('changes', data)
			}

		}
	};
</script>